<template>
  <el-dialog v-model="dialogVisible" :title="userForm.id ? '编辑用户' : '新增用户'" width="30%">
    <el-form ref="formRef" :model="userForm" :rules="rules" label-width="100px" style="padding-right: 30px">
      <el-form-item label="名称：" prop="name">
        <el-input v-model="userForm.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="账号：" prop="account">
        <el-input v-model="userForm.account" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input v-model="userForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="手机号：" prop="phone">
        <el-input v-model="userForm.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="性别：" prop="sex">
        <el-input v-model="userForm.sex" placeholder="请输入性别"></el-input>
      </el-form-item>
      <el-form-item label="类型：" prop="type">
        <el-select v-model="userForm.type" placeholder="Select" style="width: 240px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
            :disabled="item.disabled" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { addUserAPI, editUserAPI } from "@/apis/user.js";

// 状态和引用定义
const dialogVisible = ref(false);
const formRef = ref(null);
const userForm = ref({
  id: "",
  name: "",
  account: "",
  password: "",
  phone: "",
  sex: "",
  type: "",
});

// 表单验证规则
const rules = {
  name: [
    { required: true, message: "名称不能为空", trigger: "blur" },
    { min: 2, max: 10, message: "名称为2-10个字符", trigger: "blur" },
  ],
  account: [{ required: true, message: "账号不能为空", trigger: "blur" },
  { min: 5, max: 20, message: "账号为5-20个字符", trigger: "blur" },
  {
    pattern: /^[a-zA-Z0-9_]+$/,
    message: '账号只能包含字母、数字和下划线',
    trigger: 'blur'
  },
  ],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" },
  { min: 6, max: 14, message: "密码为6-14个字符", trigger: "blur" },
  {
    pattern: /^(?=.*[a-zA-Z])(?=.*\d).{6,}$/,
    message: '密码必须包含字母和数字',
    trigger: 'blur'
  },
  ],
  phone: [{ required: true, message: "电话不能为空", trigger: "blur" },
  {
    pattern: /^1[3-9]\d{9}$/,
    message: "请输入有效的手机号码",
    trigger: "blur",
  },
  ],
  sex: [{ required: true, message: "性别不能为空", trigger: "blur" }],
  type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
};

const options = [
  {
    value: '0',
    label: '管理员',
  },
  {
    value: '1',
    label: '用户',
  },
]

// 事件定义
const emit = defineEmits(["success"]);

// 提交表单处理
const onSubmit = async () => {
  await formRef.value.validate();
  const isEdit = userForm.value.id;
  if (isEdit) {
    await editUserAPI(userForm.value);
    ElMessage.success("编辑成功");
  } else {
    await addUserAPI(userForm.value);
    ElMessage.success("添加成功");
  }
  dialogVisible.value = false;
  emit("success", isEdit);
};

// 打开对话框
const open = () => {
  dialogVisible.value = true;
  userForm.value = {};
};

// 暴露方法
defineExpose({
  open,
});
</script>